<template>
  <div class="home">
    <div class="hero">
      <h1 class="text-3xl font-bold mb-6">欢迎使用 Base UI</h1>
      <p class="text-lg mb-6">基于 Vue 3 + Vite 构建的现代化前端项目</p>
      <div class="hero-actions">
        <button @click="increment" class="btn btn-primary">
          点击计数: {{ count }}
        </button>
        <router-link to="/about" class="btn btn-secondary">
          了解更多
        </router-link>
        <router-link to="/admin" class="btn btn-primary">
          进入后台管理
        </router-link>
      </div>
    </div>

    <div class="features">
      <h2 class="text-2xl font-bold mb-6 text-center">技术特性</h2>
      <div class="grid grid-cols-3">
        <div class="card">
          <h3 class="font-bold mb-4">⚡ Vite</h3>
          <p>极速的热重载和构建体验</p>
        </div>
        <div class="card">
          <h3 class="font-bold mb-4">🎯 Vue 3</h3>
          <p>Composition API 和更好的性能</p>
        </div>
        <div class="card">
          <h3 class="font-bold mb-4">🍍 Pinia</h3>
          <p>现代化的状态管理方案</p>
        </div>
        <div class="card">
          <h3 class="font-bold mb-4">🧭 Vue Router</h3>
          <p>官方路由解决方案</p>
        </div>
        <div class="card">
          <h3 class="font-bold mb-4">📡 Axios</h3>
          <p>强大的HTTP客户端</p>
        </div>
        <div class="card">
          <h3 class="font-bold mb-4">🎨 现代化UI</h3>
          <p>美观的界面设计</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'

const counterStore = useCounterStore()
const { count, increment } = counterStore
</script>

<style scoped>
.hero {
  text-align: center;
  padding: 4rem 0;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border-radius: 16px;
  margin-bottom: 3rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.features {
  padding: 2rem 0;
}
</style> 